<template>
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogSelect.title"
    draggable
    :close-delay="200"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="app-container">
      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
        height="300"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="label" label="角色名称" align="center" prop="label" width="" />
        <!-- <el-table-column label="操作" fixed="right" width="90">
          <template #default="scope">
            <el-button type="" size="small" @click="select(scope.row)">选择 </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!--      </el-card>-->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import request from "@/utils/request";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(500);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 500;
  }
}

const emit = defineEmits(["selectSendClose"]);
const props = defineProps({
  dialogSelect: {
    type: Object,
    default: () => ({
      visible: false,
      title: "选择登录角色",
    }),
  },
  list: {
    type: Array,
    default: () => [],
  },
});

const visible = ref(props.dialogSelect.visible);
let loading = ref(false);

const tableList = ref<[]>(props.list);
let total = ref(0);
const handleCurrentChange = (val: any) => {
  closeDialog(val, true);
};
/* 发送关闭信息并返回选择信息 */
function selectSendClose(personInfo, query) {
  emit("selectSendClose", personInfo, query);
}

/* 选择人员 */
function select(info) {
  closeDialog(info, true);
}

/**
 * 关闭弹窗
 */
function closeDialog(info, query) {
  visible.value = false;
  selectSendClose(info, query);
}

onMounted(() => {
  initScreen();
});

onUnmounted(() => {});
</script>

<style lang="less" scoped>
.app-container {
  padding: 0px;
}
:deep(.el-table__cell) {
  cursor: pointer;
}
</style>
